<style scoped>
/* #map, */
#ctrl-bar {
  z-index: 2;
  position: absolute;
  padding: 2px 2px;
  text-align: center;

  top: 10px;
  right: 10px;
  background: #fff;
}
#map {
  z-index: 1;
}
</style>

<template id="route-map">
  <div id="route-map-container" >

    <div id="map" :style="style"/>
    <ButtonGroup id="ctrl-bar">
        <Button type="ghost" icon="play"></Button>
        <Button type="ghost" icon="pause"></Button>
        <Button type="ghost" icon="stop"></Button>
    </ButtonGroup>

  </div>
</template>

<script>
export default {
  name: "routeMapView",
  data() {
    return {
      style: {
        width: "100%",
        height: "760px"
      }
      //,map: {}
    };
  },
  props: ["centre", "points"],
  methods: {
    getBMap() {
      var map = new BMap.Map("map", { enableMapClick: false });
      var center = new BMap.Point(108.953652, 34.276184);
      map.centerAndZoom(center, 15);
      map.enableScrollWheelZoom(true);
      map.setMapStyle({ style: "grayscale" });
      map.clearOverlays();
      this.map = map;
      return map;
    },
    /**@augments */
    getRoutes(data) {
      console.log(this.map);
      var map = this.map;
      this.map.clearOverlays();

      var waypoints = [];
      var start = new BMap.Point(data[0].latitude, data[0].longitude),
        end = new BMap.Point(
          data[data.length - 1].latitude,
          data[data.length - 1].longitude
        );
      var driving = new BMap.DrivingRoute(this.map, {
        renderOptions: { map: this.map, autoViewport: true }
      });
      for (var i = 0; i < data.length; i++) {
        console.log(i + "#" + data[i]);

        // 地图打点
        var point = new BMap.Point(data[i].latitude, data[i].longitude);
        this.addMarker(point, data[i].name);

        // 设置途经点集合
        if (i > 0 && i < data.length - 1) {
          waypoints.push(point);
        }
      }

      var carStyle = new BMap.Icon(
        "../src/assets/car.png",
        new BMap.Size(32, 70),
        {
          offset: new BMap.Size(0, -5), //相当于CSS精灵
          imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
        }
      );

      driving.search(start, end, { waypoints: waypoints });
      driving.setSearchCompleteCallback(function() {
        // 获取路线中的路段个数
        var rnum = driving.getResults().getPlan(0).getNumRoutes()
        var pts = []
        for(var i=0;i<rnum;i++){
          var pt = driving.getResults().getPlan(0).getRoute(i).getPath();
          //pts.concat(pt)
          for(var j=0;j<pt.length;j++){
            pts.push(pt[j])
          }
        }

        var paths = pts.length; //获得有几个点

        var carMk = new BMap.Marker(pts[0], { icon: carStyle });
        map.addOverlay(carMk);

        i = 0;
        function resetMkPoint(i) {
          //debugger;
          carMk.setPosition(pts[i]);
          if (i < paths) {
            setTimeout(function() {
              i++;
              resetMkPoint(i);
            }, 10);
          }
        }

        setTimeout(function() {
          resetMkPoint(1);
        }, 10);
        
      });
    },

    addMarker(point, text) {
      var marker = new BMap.Marker(point);
      this.map.addOverlay(marker);
      console.log("-> " + point);

      var label = new BMap.Label(text, { offset: new BMap.Size(20, -10) });
      marker.setLabel(label);
    }

  },
  mounted() {
    this.getBMap();

    // var myP1 = new BMap.Point(116.380967, 39.913285); //起点
    // var myP2 = new BMap.Point(116.424374, 39.914668); //终点
    // var car = new BMap.Icon("../src/assets/car.png", new BMap.Size(32, 70), {
    //   offset: new BMap.Size(0, -5), //相当于CSS精灵
    //   imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
    // });
    // var driving2 = new BMap.DrivingRoute(map, {
    //   renderOptions: { map: map, autoViewport: true }
    // }); //驾车实例
    // driving2.search(myP1, myP2); //显示一条公交线路

    // window.run = function() {
    //   var driving = new BMap.DrivingRoute(map); //驾车实例
    //   driving.search(myP1, myP2);
    //   driving.setSearchCompleteCallback(function() {
    //     var pts = driving
    //       .getResults()
    //       .getPlan(0)
    //       .getRoute(0)
    //       .getPath(); //通过驾车实例，获得一系列点的数组
    //     var paths = pts.length; //获得有几个点

    //     var carMk = new BMap.Marker(pts[0], { icon: car });
    //     map.addOverlay(carMk);
    //     var i = 0;
    //     function resetMkPoint(i) {
    //       carMk.setPosition(pts[i]);
    //       if (i < paths) {
    //         setTimeout(function() {
    //           i++;
    //           resetMkPoint(i);
    //         }, 100);
    //       }
    //     }

    //     setTimeout(function() {
    //       resetMkPoint(5);
    //     }, 100);

    //   });
    // };

    // setTimeout(function() {
    //   run();
    // }, 1500);
  }
};
</script>